<template>
    <el-row>
        <el-col :span="4" class="scrollThin" style="height:calc(100vh - 110px);overflow-y: scroll">
        <CommonPmsCategory @selectCatId="selectCatId"/>
        </el-col>
        <el-col :span="20" style="padding:0 5px">
            <el-form inline >
                <el-form-item label="组名">
                    <el-input v-model="query.payload.attrGroupName" placeholder="组名" />
                </el-form-item>
                <el-form-item label="描述">
                    <el-input v-model="query.payload.descript" placeholder="描述" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" activity @click="queryData">查询</el-button>
                    <el-button type="warning" activity @click="queryDataAll">查询全部</el-button>
                    <el-button type="success" activity @click="reset">重置</el-button>
                    <el-button type="primary" @click="toAdd">新增</el-button>
                </el-form-item>
            </el-form>
            <el-divider style="margin: 12px 0"/>
            <el-table ref="table" border row-key="attr_group_id" v-loading="loading"  :data="data.tableData" header-cell-class-name="headerClass">
                <el-table-column align="center" type="index"  label="序号" width="100px" />
                <el-table-column align="center"  prop="attrGroupName" label="组名" />
                <!--<el-table-column align="center"  prop="sort" label="排序"/>-->
                <el-table-column align="center"  prop="descript" label="描述" />
                <el-table-column align="center"  prop="icon" label="组图标" />
                <!--<el-table-column align="center"  prop="catalogId" label="所属分类Id" />-->
                <el-table-column align="center"  prop="catalogNameTemp" label="所属分类" />
                <el-table-column align="center"  label="操作">
                    <template #default="scope">
                        <el-link style="font-size: 14px" title="关联" type="primary" @click="relation(scope.row.attrGroupId)">
                            <el-icon :size="15">
                                <Edit />
                            </el-icon>
                            关联
                        </el-link>
                        &nbsp;
                        <el-link style="font-size: 14px" title="修改" type="warning" @click="addOrUpdateHandle(scope.row.attrGroupId)">
                            <el-icon :size="15">
                                <Edit />
                            </el-icon>
                            修改
                        </el-link>
                        &nbsp;
                        <el-popconfirm title="删除？" @confirm="toDelete(scope.row.attrGroupId)"  @cancel="">
                            <template #reference>
                                <el-link style="font-size: 14px" type="danger" title="删除">
                                    <el-icon :size="15">
                                        <Delete />
                                    </el-icon>
                                    删除
                                </el-link>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    style="display: flex;align-items:center;justify-content:center;"
                    v-model:currentPage="query.currentPage"
                    v-model:page-size="query.pageSize"
                    :page-sizes="[10, 20, 30]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="query.total"
                    @size-change="queryData"
                    @current-change="queryData"
            />
        </el-col>
    </el-row>
    <ModAttrGroup ref="modAttrGroup" @reload="queryDataAll" :id="transData.id" :openType="transData.openType"/>
    <ModAttrGroupRelation ref="modAttrGroupRelation" :id="transData.id" :openType="transData.openType" />
</template>

<script setup>
    import ModAttrGroup from '@/views/mall/pms/components/ModAttrGroup.vue'
    import ModAttrGroupRelation from '@/views/mall/pms/components/ModAttrGroupRelation.vue'
    import CommonPmsCategory from '@/components/common/CommonPmsCategory.vue'
    import request from '@/utils/request.js'
    import { ElMessage } from 'element-plus'
    import {ref,  reactive, onMounted} from 'vue'
    import moment from 'moment'

    import useAuthBtn from '@/hooks/useAuthBtn.js'
    let authBtn = useAuthBtn()
    let modAttrGroup = ref(null)
    let modAttrGroupRelation = ref(null)
    let data = reactive({
        open:false,
        tableData:[],
        type:"",
        id:"",
    });
    let transData = reactive({})
    let loading = ref(true)

    let query = reactive({currentPage:1, pageSize:10, total:0, payload: {}})
    onMounted(() => {
        queryData();
        loading.value = false
    })

    const addOrUpdateHandle = (groupId)=>{
        modAttrGroup.value.isOpen = true
        transData.openType = "edit"
        transData.id = groupId
    }
    const selectCatId = (catalogId)=>{
        query.payload.catalogId = catalogId
        transData.catalogId=catalogId
        loading.value = true
        request.post("/api/pmsAttrGroup/getAttrGroupsByCateId", query).then(resp => {
            data.tableData = resp.records
            query.total = resp.total
            loading.value = false
        })
    }

    function queryData(){
        loading.value = true
        request.post("/api/pmsAttrGroup/getAttrGroupsByCateId", query).then(resp => {
            data.tableData = resp.records
            query.total = resp.total
            loading.value = false
        })
    }
    function queryDataAll(){
        let tempCatId = query.payload.catalogId
        query.payload.catalogId = null
        loading.value = true
        request.post("/api/pmsAttrGroup/getAttrGroupsByCateId", query).then(resp => {
            data.tableData = resp.records
            query.total = resp.total
            loading.value = false
            query.payload.catalogId = tempCatId
        })
    }
    function reset(){
        query.username = ""
        query.gender = ""
    }

    function toAdd(){
        modAttrGroup.value.isOpen = true
        transData.openType = "add"
    }
    function toDelete(id){
        request.get(`/api/pmsAttrGroup/delete/${id}`).then(resp => {
            queryData()
            ElMessage({message: '删除成功！',type: 'success'})
        });
    }

    function relation(id){
        transData.id = id
        modAttrGroupRelation.value.isOpen = true
    }

</script>
<style lang="css" scoped>
    .address {overflow:hidden;white-space:nowrap;word-wrap:break-word;text-overflow:"ellipsis";}
    .head {background-color: #9561cc}
    [v-cloak]{
        display: none  !important;
    }
    .demo-form-inline{
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
    }
    </style>